[CSS] 요소 및 레이어 중앙 정렬시키는 가장 쉽고 간단한 방법

 
웹사이트에서 모달(Modal) 및 팝업창을 띄우거나 기타 특정 요소를 가로 또는 세로로 중앙 정렬하기 위한 방법은 몇 가지가 있다. 이때 해당 요소를 스크롤 및 브라우저 크기가 관계 없이 항상 고정된 위치에 중앙 정렬을 가지려면 어떤 방법이 가장 효과적일까...

우선 요소를 중앙정렬 시키기는 일반적이면서 가장 간단한 방법으로 left 속성을 사용하며 우리는 아래와 같이 CSS를 사용해 이를 가능하게 할 수 있다.

오른쪽(우측)으로 요소를 상대값 50% 만큼 이동시키면 해당하는 엘리먼트의 크기의 절반 만큼 다시 왼쪽으로 이동시킬 필요가 있게된다. 그래서 사용되는 방법이 해당요소의 크기만큼 50%를 다시 반대방향으로 이동하는 것이다. 예를 들어서...

만약 요소의 크기가 800px인 경우 좌측으로 -400px 이동시키면 동일한 값을 가지게 된다. 하지만 left 속성은 이미 사용되었기 때문에 왼쪽으로 이동시킬 다른 css속성이 필요한대 이를 대신하여 margin-left를 추가한다. 아래처럼 말이다.


안따깝게도 이 코드는 특정 요소의 width 그리고 height를 알아야만 한다는 단점이 존재한다. 하지만 이를 해결할 수 있는 방법이 있으니 CSS3의 transform 속성을 이용하는 것이다...

# transform 속성을 이용한 중앙정렬

transform 속성은 css3 속성으로 특정 대상을 이동하거나 크기를 줄일수도 있고 회전하는 등의 다양한 시각적 효과를 부여한다. 만약 기존의 css 코드에 transform 속성을 추가하면 아래와 같은 코드를 완성할 수 있을 것이다.

아래의 코드는 해당 요소 크기의 절반(50%)를 좌측으로 다시 이동시키며 완벽한 중앙 정렬을 가져올 수 있을 것이다.

이 방법을 사용할 때 주의할 점이 있다... 화면에 의도하지 않은 선이나 여백이 나타날 수 있는데 이는 원래의 요소 크기가 홀수인 경우 발생한다... 이미지가 홀수인 경우에는 소수점 자리가 나타나므로 반드시 원래 이미지를 짝수로 만드는 것이 좋다. 개인적으로 모든 고정된 요소에 값을 부여할 때 짝수값을 주는데 이런 습관이 도움이 될 수도 있다.

! 참고사항

위 translate()는 transform-origin의 값을 기준 위치가 달라지게 됩니다. 그러므로 중앙 위치가 아닌 경우 transform-origin: 50% 50%;의 값을 사용해야 할 수 있습니다.

요즘의 최신 브라우저의 경우 대부분 flex 레이아웃이 가능하기 때문에 justify-content와 align-items를 사용하여 쉽게 정렬하는 것이 가능합니다.